<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="130">
          <FormItem label="是否禁用">
            <i-switch v-model="disabled"></i-switch>
          </FormItem>
          <FormItem label="是否可清空">
            <i-switch v-model="clearable"></i-switch>
          </FormItem>
          <FormItem label="是否支持搜索">
            <i-switch v-model="filterable"></i-switch>
          </FormItem>
          <FormItem label="尺寸">
            <Select :transfer="true" size="small" v-model="size">
              <Option v-for="item in sizes" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="选择框默认文字">
            <Input size="small" v-model="placeholder" placeholder=""/>
          </FormItem>
          <FormItem label="搜索列表为空显示">
            <Input size="small" v-model="notFoundText" placeholder=""/>
          </FormItem>
          <FormItem label="次级菜单展开方式">
            <Select size="small" v-model="trigger">
              <Option v-for="item in triggers" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>

          <FormItemPanel title="样式配置">
            <FormItem label="放大倍率">
              <Tooltip content="可将组件进行等比例放大" placement="left">
                <InputNumber size="small" :max="10" :min="0" :step="0.1" v-model="inputStyle.scaleValue" :active-change="false"></InputNumber> 倍
              </Tooltip>
            </FormItem>
            <FormItem label="宽度">
              <Input size="small" v-model="inputStyle.width"/>
            </FormItem>
            <FormItem label="背景色">
              <PnColorPicker size="small" v-model="inputStyle.backgroundColor" alpha recommend/>
            </FormItem>
            <FormItem label="文本色">
              <PnColorPicker size="small" v-model="inputStyle.color" alpha recommend/>
            </FormItem>

            <FormItem label="边框颜色">
              <PnColorPicker size="small" v-model="inputStyle.borderColor" alpha recommend/>
            </FormItem>
          </FormItemPanel>
        </Form>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <Form :label-width="130">
          <FormItem label="可选项数据源结构">
            <Select :transfer="true" size="small" v-model="datasourceType" placement="bottom-end">
              <Option v-for="item in datasourceTypes" :value="item.value" :label="item.label" :key="item.value">
                <span>{{ item.label }}</span>
                <p style="color: #808695;">{{item.remark}}</p>
              </Option>
            </Select>
          </FormItem>
        </Form>
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="CascaderComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>
          <Form :label-width="130">
            <FormItem label="数据交互流取值类型">
              <Select :transfer="true" size="small" v-model="sendDataType" placement="bottom-end">
                <Option v-for="item in sendDataTypes" :value="item.value" :label="item.label" :key="item.value">
                  <span>{{ item.label }}</span>
                  <p style="color: #808695;">{{item.remark}}</p>
                </Option>
              </Select>
            </FormItem>
          </Form>
          <FormItemPanel title="选中值变化时触发">
            <InteractionSender :interactionKey="'itemChange'" :canAddFieldsMap="false"></InteractionSender>
            <Alert show-icon style="padding-right: 10px;">通过value可获取选中值，selectedData为已选项的具体数据</Alert>
            <CodeEditor v-model="onChangeCode"></CodeEditor>
          </FormItemPanel>
          <FormItemPanel title="点击清空按钮时触发">
            <InteractionSender :interactionKey="'itemClear'" :canAddFieldsMap="false"></InteractionSender>
            <CodeEditor v-model="onClearCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'CascaderCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {
        sizes: [
          {label: '默认', value: 'default'},
          {label: '小尺寸', value: 'small'},
          {label: '大尺寸', value: 'large'},
        ],
        datasourceTypes: [
          {label: '树形结构', value: 'children', remark: '以children字段包含子节点'},
          {label: '一维数组pid结构', value: 'pid', remark: '一维数组，每个数组项中，应该都必须包含一个唯一标识，例如id，以pid字段来关联父节点，如果是顶级节点，pid应该为空字符或者0'}
        ],
        sendDataTypes: [
          {label: '取所有值', value: 'all', remark: '会将所选项从最开始节点至最尾节点的label或value值以逗号分隔一并发送'},
          {label: '取最尾值', value: 'last', remark: '只会取所选项最尾节点的label或value值发送'}
        ],
        triggers: [
          {label: '鼠标点击', value: 'click'},
          {label: '鼠标滑入', value: 'hover'}
        ]
      }
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({

        disabled: 'component.compConfigData.disabled',
        clearable: 'component.compConfigData.clearable',
        filterable: 'component.compConfigData.filterable',
        size: 'component.compConfigData.size',
        placeholder: 'component.compConfigData.placeholder',
        notFoundText: 'component.compConfigData.notFoundText',
        inputStyle: 'component.compConfigData.inputStyle',
        trigger: 'component.compConfigData.trigger',

        sendDataType: 'component.compConfigData.sendDataType',
        datasourceType: 'component.compConfigData.datasourceType',

        onChangeCode: 'component.compConfigData.onChangeCode',
        onClearCode: 'component.compConfigData.onClearCode'

      })
    }
  }
</script>

<style scoped>

</style>
